import React from 'react'
import './index.less'
import http from 'libs/http'

export default class extends React.Component {
  state = {
    levelOne: 0, // 学习小超人 
    levelTwo: 0, // 学习小能手
    levelThree: 0, // 继续加油
  }

  componentDidMount() {
    this.getMyMedals()
  }

  getMyMedals = () => {
    http.get('/student/my-reflection/medals').then(res => {
      const { levelOne, levelTwo, levelThree } = res.data
      this.setState({
        levelOne, levelTwo, levelThree
      })
    })
  }

  render() {
    const { levelOne, levelTwo, levelThree } = this.state
    const total = levelOne + levelThree + levelThree
    return (
      <div className="my-medal">
        <div className="my-medal-content">
          <div className="medal-header">
            <span></span>
            <p>恭喜您，已经拥有了{total}枚勋章哦！继续加油！</p>
          </div>
          <div className="medal-content">
            <div><span className="superman"></span><b>{levelOne}枚</b></div>
            <div><span className="little-expert"></span><b>{levelTwo}枚</b></div>
            <div><span className="keep-on-fighting"></span><b>{levelThree}枚</b></div>
          </div>
        </div>
      </div>
    )
  }
}